関西のTypeScript好きが集まる勉強会「kansai.ts ＃1」に参加してきました！ #kansaits

どうも！大阪オフィスの西村祐二です。

最近、TypeScriptの勢いがすごいですよね！

ちょうど6月10日に大阪でkansai.tsという勉強会が開催されましたので、参加してきました！

場所

GVH Osaka（グランフロント北館７階）

LT発表

Advanced built-in types

平野 昌士さんによる発表内容はTypeScriptにbuilt-inされている便利な型を紹介するという内容でした。

ざっくり概要

• 公式ドキュメントに記載されている「Advanced Types」に便利な型がのっている

• Conditiona TypesやMapped Typesの理解は必要

• 紹介された型

  • Partial すべてのプロパティをoptionalにすることができる

  • Required すべてのプロパティをnon-optionalにする

  • Readonly プロパティを読み取り専用にする(よく使われる)

  • Pick 指定したプロパティのみ残す

  • Record key名とvalueの型を指定したオブジェクト型を作る

  • Exclude 列挙から指定した値を取り除く

  • Extract 列挙の中から指定した値を抽出

  • NonNullable nullとundifinedを取り除く

  • Parameters 関数の引数の型をタプルで取る

• 紹介しきれなかった他の型はGithubのここをみると載っている

出た質問

• interfaceでも使える？ => つかえる

• よく使うものは？ => readonly

所感

Advanced Types使いこなせてないので、とりあえず一つプロダクトなどで取り入れて使いこなせるようになりたいです。

また、時間あるときは

http://www.typescriptlang.org/play/

でサンプルなど写経して、書き方や挙動を理解していこうと思います。

AWS-CDK for TypeScriptを紹介するぜ

Ryosuke Izumi(is_ryo)さんからはTypeScriptのコードからCfnテンプレートを生成できるAWS-CDKについての内容でした。

https://master.d1r9qwzhk27es2.amplifyapp.com/

ざっくり概要

• YAML、JsonでCfnテンプレート作成するの辛くない？

• 手慣れた身近な言語TypeScriptで書きたい

• AWS-CDKを使ってTypeScriptのコードでCfnのテンプレートを生成

• デプロイの流れ：tsでコードを書く => BuildしてYAML生成 => Deploy

• デモによる実演

• まだPublicBetaだから本番環境での利用は避けよう

• 理由：破壊的変更が起こる

• ドキュメントよりソースコードを読むほうがはやい

• TypeScriptでCFnのテンプレートが生成されるのがほんと幸せ

• エラーで詰まったら最悪、吐き出されたyamlを手動で編集して対応する

所感

CfnのテンプレートをYAMLで作ることがあるのですが、どのパラメータが使えるのか調べるためにドキュメント行ったり来たり、デプロイしてトライアンドエラーを繰り返したりとつらいなと思っているので、AWS-CDKの安定版を心の底から待っています。

ざっくりAssemblyScript

丸末皓太さんからはWebAssemblyとAssemblyScriptに関する内容でした。

資料はこちら

ざっくり概要

• WebAssemblyとはブラウザ上で動作する低水準言語、バイナリフォーマット

• IEを除く大体のブラウザで動く

• .wasmバイナリファイルを配布

  • サイズが小さい
  • パース時間がない
  • 静的な型付け
  • V8 v7.5からはコンパイル済みのモジュールをキャッシュ、再訪問したページでは再コンパイルしない
  • コンパイルしたファイルをキャッシュする機能がある
• TypeScriptでWebAssemblyを書くにはAssemblyScriptを使う
  • npm installで環境構築簡単
  • .tsから.watと.wasmが生成される
  • .watはテキスト形式、.wasmはバイナリ形式
  • AssemblyScriptにはGCがある
• バックエンド、フロントエンド、高速化したいところ全部TSでかける

• AssemblyScriptで作られたデモ「らいふげーむ」「まんでるぶろしゅうごう」

• はじめるならここをよむといい

  • https://docs.assemblyscript.org/basics

所感

AssemblyScriptの特徴など簡潔にまとめられていてとてもわかりやすかったです。

バックエンド、フロントエンド、高速化したいところ全部TSでかけるようにTS力を高めていきます。

Alexaスキル開発で始めるTypeScript

Hidetaka OkamotoさんからはAlexaのカスタムスキルをTypeScriptで書くと入門としていいよという内容のでした。

ざっくり概要

• Alexa Developerスキルアワード2019

• Alexaは「音声　=>　文字　=>　Json」の2ステップ

• LambdaへのInput/Outputがほぼ固定なので、TypeScript入門向け

• AlexaのSDKはTypeScriptで作られている

• 200-300行ぐらいのJsonなのでエディタの入力補完ないと辛い

• Requestの型が合わないときはasを使っていいという考え

• TSでAlexaのSDKのSDKをいろいろ作っている

所感

今までAlexaのカスタムスキルは作ったことなかったので、これを機会にひとつ作ってみようと思いました。

Cognitive Complexity でコードの複雑さを定量的に計測しよう

ざっくり概要

• code climateはコード品質、カバレッジ測定できるサービス

• 使ってみたらCognitive Complexityが８あるから５以下にしろという警告がでた

• Cognitive Complexityを訳すと「認知的 複雑度」

• Cyclomatic Complexity:機械的なテストの難しさ(昔からある)

• Cognitive Complexity:人間にとっての難しさ

• ショートハンドが使われていれば、複雑とみなさない

• code climateなら品質の計測は無料でできる

• docker-composeでの実行も可能

所感

Cognitive Complexityははじめてきく言葉でとても勉強になりました。

実装スピードが求められる中、どうやってコードの品質を高めるかということはいつも悩んでいたので、このようなサービスをどんどん活用して、品質の高いコードがかけるようにしていきたいと思います。

VSCode RemoteではじめるNuxt生活

salamander_jpさんからはVSCode Remoteに関する内容でした。

資料は下記になります。 https://docs.google.com/presentation/d/19d7b_BIN2kdvU4Huzd4lX3ey6E2pbTDCrb_tZ1ruqvo/edit#slide=id.p

ざっくり概要

• NuxtでVSCode Remoteを使うメリット
  • 言語のバージョン管理が不要
  • 拡張機能もリモート環境にインストール可能。一緒に開発する人と環境を揃えることができる
  • Dockerが使えるのでCI/CD環境と開発環境が統一できる
• 実際に動かしてみるデモ

• GitHubリポジトリの紹介

所感

VSCode Remote、改めて便利だなと思いました。まだ試したことがないので試してみます！

TypeScriptでAPIの受け入れテストを記述

mikakaneさんからはTypeScirptは実行時はチェックしてくれないので、io-tsを使ってRuntime時にチェックするようにしてみたという内容でした。

資料は公開され次第追記します。

ざっくり概要

• Vue.js＋TypeScriptをやってみた

• Vue.jsのシンプルに記述できる良さが半減

• Vue.jsの良さを残しながら部分的にTypeScriptを導入

• Runtime時にチェックしたかったから、「io-ts」を使ってみた

• jestでテストするときにAPIのレスポンスの型チェック

• テストコードで記述するので、遅くなるとかデメリットはない

所感

「io-ts」ははじめてききましたが、Lambda+APIGで作ったAPIのテストに使えそうだなと思いました。

さいごに

TypeScriptの深い話からAssemblyScript、AWS CDKやAlexaの話もあり、幅広くとても内容が濃くて楽しかったです。

次回も参加したいと思います。